<template>
    <!------- 商品详情模块 -->
    <!-- <div class="wrapper"> -->
    <div>
        <div class="item-detail-show" :style="height = `${heightna}px`">
            <!-- 详情左侧展示数据、图片，收藏、举报 -->
            <div class="item-detail-left">
                <!-- -------大图、放大镜 -->
                <div class="item-detail-big-img">
                    <pic-zoom
                        :url="skuList[guigeID].photo[imgIndexs].substring(0, 1) == 'h' ? skuList[guigeID].photo[imgIndexs] : `https://scm.gllscm.com${skuList[guigeID].photo[imgIndexs]}`"
                        :scale="2" :position="{ x: 500, y: 500 }">
                        <!-- <img :src="skuList[guigeID].photo[imgIndexs].substring(0, 1) == 'h' ? skuList[guigeID].photo[imgIndexs] : `https://scm.gllscm.com${skuList[guigeID].photo[imgIndexs]}`" alt="原始图片"> -->
                    </pic-zoom>
                </div>
                <!-- --------大图 -->
                <!-- ---------小图 -->
                <div class="images-aa">
                    <p @click="imageMoveFn(1)" class="left-img">
                        < </p>
                            <div class="item-detail-img-row">
                                <div class="item-detail-img-small"
                                    :style="{ transform: `translateX(${tranformLantX}px)` }">
                                    <img v-for="(item, index) in skuList[guigeID].photo" @click=" fnclickimage(index)"
                                        :src="item.substring(0, 1) == 'h' ? item : `https://scm.gllscm.com${item}`" />
                                </div>
                            </div>
                            <p @click="imageMoveFn(2)" class="right-img">></p>
                </div>
                <!-- ---------小图 -->
            </div>
            <!-- ------------左侧图片html -->
            <div class="item-detail-right">
                <div class="item-detail-title">
                    <p>
                        {{ skuDetail.goods_name }}
                        {{ goodsSpecList[stockId].name }}
                    </p>
                </div>
                <div class="sell-point">
                    {{ skuDetail.goodslabel }}
                </div>
                <!-- 商品详细 价格、优惠券、促销 -->
                <div class="item-detail-price-row">
                    <div class="item-price-left">
                        <!-- 商品价格  -->
                        <div class="item-price-row" style="display: flex; justify-content: space-between;">
                            <p>
                                <span class="item-price-title">一&nbsp;件&nbsp;代&nbsp;发&nbsp;价：</span>
                                <span class="item-price">{{ goodsSpecList[stockId].market_price | unitPrice("￥")
                                    }}</span>
                            </p>
                            <p>
                                <span class="item-price-title">集&nbsp;采&nbsp;价：</span>
                                <span class="item-price">{{ goodsSpecList[stockId].fx_price | unitPrice("￥") }}</span>
                            </p>
                        </div>
                    </div>
                </div>
                <!-- 国产 -->
                <div class="mt_10">
                    <Tag class="goods-show-tag" color="red">{{ skuDetail.goodsorign }}</Tag>
                    <Tag class="goods-show-tag" color="blue">{{ skuDetail.cangku }}</Tag>
                    <Tag class="goods-show-tag" color="blue">{{ skuDetail.salesplat }}</Tag>
                </div>
                <!-------------------- 选择颜色 规格-------------------->
                <div class="goods-select-hue" style="display: flex;align-items: center;">
                    <div class="goods-sh-title" style="font-size: 14px;">规格：</div>
                    <p @click="speciMoveFn(1)" class="left-img">
                        < </p>
                            <div class="item-select">
                                <div class="item-select-title">
                                    <div class="div-p" :style="{ transform: `translateX(${speciMoveX}px)` }">
                                        <p style="min-width:40px ;padding: 2px 3px;  cursor: pointer;"
                                            :class="{ 'specactive': guigeID === index }"
                                            @click="select(index, skuDetail.goods_id)"
                                            v-for="(sku, index) in goodsSpecList" :key="sku.name">{{ sku.name }}</p>
                                    </div>
                                </div>
                            </div>
                            <p @click="speciMoveFn(2)" class="right-img">></p>
                </div>
                <br />
                <!-- 商品库存 -->
                <div class="add-buy-car-box" style="margin-top: 0;">
                    <div class="item-select mb_10">
                        <div class="item-select-title">
                            <p style="line-height: 32px;min-width: 60px; ">库存：</p>
                        </div>
                        <div class="item-select-row" style="margin-bottom: 0;">
                            {{ goodsSpecList[stockId].stock }}
                        </div>
                    </div>

                </div>
                <!-- ---------------------- -->
                <div class="mt_10 mb_10" style="display: flex; align-items: center;">
                    <div class="item-select-title" style="display: inline-block;">
                        <p class="goods-link-tit">比价链接：</p>
                    </div>
                    <div class="" style="display: inline-block;">
                        <span class="goods-link-tag" @click="jumpLink(skuDetail.website_link)">官网价</span>
                        <span class="goods-link-tag" @click="jumpLink(skuDetail.jd_link)">京东价</span>
                        <span class="goods-link-tag" @click="jumpLink(skuDetail.tmall_link)">天猫价</span>
                    </div>
                </div>
                <div class="add-buy-car-box" style="margin-top: 0;">
                    <div class="add-buy-car" v-if="$route.query.way === 'POINT' && skuDetail.authFlag === 'PASS'">
                        <Button type="error" :loading="loading" :disabled="skuDetail.quantity === 0"
                            @click="pointPay">积分购买</Button>
                    </div>
                    <div class="add-buy-car">
                        <Button type="error" v-if="skuList[guigeID].cartnum > 0" :loading="loading"
                            :disabled="true">已加入选品库</Button>

                        <Button type="error" v-else :loading="loading" :disabled="false"
                            @click="addShoppingCartBtn">加入选品库</Button>
                    </div>
                </div>
                <!-- 详情图 -->
            </div>

        </div>
        <div class="goods-image-det">
            <div class="text">商品介绍</div>
            <p style="text-align: center; font-size: 18px;" v-html="skuList[guigeID].content"></p>

            <div class="images" v-if="skuList[guigeID].detail_image != ''">
                <div class="image" v-for="(item, index) in skuList[guigeID].detail_image" :key="item">
                    <img alt="" :src="item.substring(0, 1) == 'h' ? item : `https://scm.gllscm.com${item}`">
                </div>
            </div>
            <div v-else :style="{ height: `${heightna - 550}px` }">

            </div>
        </div>
    </div>
</template>

<script>
import Promotion from "./Promotion.vue";
import PicZoom from "vue-piczoom"; // 图片放大
import {
    collectGoods,
    // isCollection,
    receiveCoupon,
    cancelCollect,
} from "@/api/member.js";
import {
    goodsSkuDetail
} from "@/api/goods";
import {
    addCartGoods, cartCount
} from "@/api/cart.js";
export default {
    name: "ShowGoods",
    props: {
        // 商品数据
        detail: {
            type: Object,
            default: null,
        },
    },
    watch: {
        detail: {
            handler(val) {
                this.skuDetail = val;
            },
            deep: true,
            immediate: true,
        },
    },
    data() {
        return {
            wholesaleList: [],
            count: 1, // 商品数量
            imgIndex: 0, // 展示图片下标
            imgIndexs: 0, // 展示图片下标
            currentSelceted: [], // 当前商品sku
            imgList: [], // 商品图片列表
            skuDetail: {
                specList: [],
                specs: []
            }, // sku详情
            goodsSpecList: [], // 商品spec
            promotionMap: {
                // 活动状态
                SECKILL: null,
                FULL_DISCOUNT: null,
                COUPON: [],
            }, // 促销活动
            formatList: [], // 选择商品品类的数组
            loading: false, // 立即购买loading
            loading1: false, // 加入购物车loading
            isCollected: false, // 是否收藏
            guigeID: 0,//规格高亮
            stockId: 0,//某个规格的库存 new  
            // isGoodsSpec:1,//规格高亮 new   
            heightna: '',
            tranformLantX: 0,
            numImage: 0,
            speciMoveX: 0,
            numSpeci: 0,

        };
    },
    components: {
        PicZoom,
        Promotion
    },
    computed: {
        wholesalePrice(key) {
            return this.wholesaleList.length ?
                this.wholesaleList.map((item) => {
                    return item.price;
                }) :
                [];
        },
        wholesaleNum(key) {
            return this.wholesaleList.length ?
                this.wholesaleList.map((item) => {
                    return item.num;
                }) :
                [];
        },
    },
    methods: {
        fnclickimage(index) {
            this.imgIndexs = index
        },
        select(index, value) {
            this.guigeID = index
            this.imgIndex = index
            // this.$set(this.currentSelceted, index, value);
            // let selectedSkuId = this.goodsSpecList.filter((item) => {
            //     if (item.specValues[0].specValue == value) {
            //         return item
            //     } else {
            //         return
            //     }
            // })
            // console.log(selectedSkuId,'skuid-----------');
            // this.$emit("handleClickSku", {
            //     // 1部
            //     // skuId: selectedSkuId.skuId,
            //     goodsId: value,
            // });
        },
        // 商品详情
        getGoodsDetail(val) {
            this.isLoading = true;
            const params = this.$route.query;
            // 获取商品详情
            goodsSkuDetail(params)
                .then((res) => {
                    this.isLoading = false;
                    if (res.code == '1') {
                        const result = res.data.detail;
                        const cateName = res.data.categoryName;
                        const cateId = result.categoryPath.split(",");
                        const cateArr = [];
                        cateId.forEach((e, index) => {
                            // 插入分类id和name
                            cateArr.push({
                                id: e,
                                name: cateName[index],
                            });
                        });
                        // this.categoryBar = cateArr;
                        this.skuDetail = result
                        this.skuList = result.specs
                        this.$forceUpdate();
                    } else {
                    }
                })
                .catch((e) => {
                    console.log('catch', e)
                });
        },
        // ------------------商品添加到选品库-------------------
        addShoppingCartBtn() {
            const params = {
                goods_code: this.skuDetail.specs[this.guigeID].skuId,
                sku_id: this.skuDetail.specs[this.guigeID].goods_sku_id,
                goods_id: this.skuDetail.goods_id,
                num: this.count,
            };
            this.loading = true;
            addCartGoods(params)
                .then((res) => {
                    this.loading = false;
                    this.getGoodsDetail()
                    if (res.code == '1') {

                        this.skuDetail.cartnum = this.count;

                        cartCount().then((ret) => {
                            // 选品库商品数量
                            this.$store.commit('SET_CARTNUM', ret.data)
                            this.Cookies.setItem('cartNum', ret.data)
                        });

                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(() => {
                    this.loading = false;
                });
        },

        buyNow() {
            // 立即购买
            const params = {
                num: this.count,
                skuId: this.skuDetail.id,
                cartType: "BUY_NOW",
            };
            // 虚拟商品购买
            if (this.skuDetail.goodsType === "VIRTUAL_GOODS") {
                params.cartType = "VIRTUAL";
            }
            this.loading1 = true;
            addCartGoods(params)
                .then((res) => {
                    this.loading1 = false;
                    if (res.success) {
                        this.$router.push({
                            path: "/pay",
                            query: {
                                way: params.cartType
                            },
                        });
                    } else {
                        this.$Message.warning(res.message);
                    }
                })
                .catch(() => {
                    this.loading1 = false;
                });
        },
        // 格式化数据
        formatSku(list) {
            let arr = [{}];
            list.forEach((item, index) => {
                item.specValues.forEach((spec, specIndex) => {
                    let name = spec.specName;
                    let values = {
                        value: spec.specValue,
                        quantity: item.quantity,
                    };
                    if (name === "images") {
                        return;
                    }

                    arr.forEach((arrItem, arrIndex) => {
                        if (
                            arrItem.name === name &&
                            arrItem.values &&
                            !arrItem.values.find((i) => i.value === values.value)
                        ) {
                            arrItem.values.push(values);
                        }

                        let keys = arr.map((key) => {
                            return key.name;
                        });
                        if (!keys.includes(name)) {
                            arr.push({
                                name: name,
                                values: [values],
                            });
                        }
                    });
                });
            });
            arr.shift();
            this.formatList = arr;
            console.log(arr);
            let cur = list.filter((i) => i.skuId === this.$route.query.skuId)[0];
            if (cur) {
                cur.specValues
                    .filter((i) => i.specName !== "images")
                    .forEach((value, _index) => {
                        this.currentSelceted[_index] = value.specValue;
                    });
            }
            this.skuList = list;
            console.log(this.skuList, 1131);
        },
        receiveCoupon(id) {
            // 领取优惠券
            receiveCoupon(id).then((res) => {
                if (res.success) {
                    this.$Message.success("优惠券领取成功");
                } else {
                    this.$Message.warning(res.message);
                }
            });
        },
        promotion() {
            // 格式化促销活动，返回当前促销的对象
            if (!this.detail.promotionMap) return false;
            let keysArr = Object.keys(this.detail.promotionMap);
            if (keysArr.length === 0) return false;

            for (let i = 0; i < keysArr.length; i++) {
                let key = keysArr[i].split("-")[0];
                if (key === "COUPON") {
                    this.promotionMap[key].push(this.detail.promotionMap[keysArr[i]]);
                } else {
                    this.promotionMap[key] = this.detail.promotionMap[keysArr[i]];
                }
            }
        },

        //跳转链接
        jumpLink(link) {
            if (link) {
                window.open(link);
            }
        },
        // 规格 高亮点击事件 new

        // 图片移动
        imageMoveFn(a) {
            if (a == 1) {
                if (this.numImage <= 0) return
                this.tranformLantX += 72
                this.numImage--
            } else {

                if (this.numImage >= this.skuList[this.guigeID].photo.length - 4) return
                this.tranformLantX -= 72
                this.numImage++
            }
        },
        // 规格移动
        speciMoveFn(a) {
            if (a == 1) {
                if (this.numSpeci <= 0) return
                this.speciMoveX += 122
                this.numSpeci--
            } else {
                if (this.numSpeci >= this.goodsSpecList.length - 4) return
                this.speciMoveX -= 122
                this.numSpeci++
            }
        },
    },
    created() {
        this.goodsSpecList = this.skuDetail.specs
        this.formatSku(this.goodsSpecList)
        this.heightna = window.innerHeight;
    },
    beforeMount() {
        document.title = this.skuDetail.goods_name;
    },
    mounted() {
    },
};
</script>

<style scoped lang="scss">
/******************商品图片及购买详情开始******************/
.item-detail-see {
    width: 175px;
    margin-left: 30px;
}

.flex {
    display: flex;
}

.inventory {
    padding-left: 4px;
}

.wrapper {
    @include white_background_color();
}

.item-num {
    text-align: center;
    width: 100px;
}

.item-price-num {
    font-size: 16px;
    color: #666;
}

.item-detail-show {
    width: 1200px;
    margin: 0 auto;
    padding: 30px;
    display: flex;
    flex-direction: row;
    overflow: hidden;

    .item-detail-left {
        width: 350px;
        min-width: 350px;
    }

    .item-detail-right {
        flex: 1;
        width: 800px;
    }
}

.item-detail-left {
    width: 350px;
    height: 430px;
    margin-right: 30px;
    position: relative;
    overflow: hidden;
}

.item-detail-big-img {
    width: 350px;
    height: 350px;
    box-shadow: 0px 0px 8px $border_color;
    cursor: pointer;
}

.item-detail-big-img img {
    width: 100%;
}

.images-aa {
    width: 350px;
    height: 100px;
    margin-top: 15px;
    position: relative;

    .left-img,
    .right-img {
        width: 20px;
        height: 100px;
        background-color: rgba($color: #000000, $alpha: 1);
        position: absolute;
        line-height: 70px;
        text-align: center;
        color: #fff;
        font-weight: 700;
        cursor: pointer;
    }

    .left-img {
        left: 0px;
        z-index: 10;
    }

    .right-img {
        right: 0px;
        top: 0;
        z-index: 10;
    }

    .item-detail-img-row {
        height: 100px;
        width: 340px;
        // background-color: red;
        // position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;


    }

    .item-detail-img-small {
        height: 70px;
        margin-left: 20px;
        min-width: 400px;

        img {
            cursor: pointer;
            width: 70px;
            height: 70px;
            margin: 0 3px;
            box-shadow: 0px 0px 8px #ccc;
        }
    }

}

/*商品选购详情*/
.item-detail-right {
    display: flex;
    flex-direction: column;
}

.item-detail-title p {
    @include content_color($light_content_color);
    font-weight: bold;
    font-size: 20px;
    padding: 8px 0;
}

.item-detail-express {
    font-size: 14px;
    padding: 2px 3px;
    border-radius: 3px;
    background-color: $theme_color;
    color: #fff;
}

/*商品标签*/
.item-detail-tag {
    padding: 8px 0;
    font-size: 12px;
    color: $theme_color;
}

/*价格详情等*/
.item-detail-price-row {
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: url("../../assets/images/goodsDetail/price-bg.png");
}

.item-price-left {
    display: flex;
    flex-direction: column;
    width: 400px;
}

.item-price-title {
    color: #999999;
    font-size: 14px;
    margin-right: 15px;
}

.item-price-row {
    margin: 5px 0px;

    p {
        min-width: 190px;
    }
}

.item-price {
    color: $theme_color;
    font-size: 20px;
    cursor: pointer;
}

.item-price-old {
    color: gray;
    text-decoration: line-through;
    font-size: 14px;
    margin-left: 5px;
}

.item-price-coupon-row {
    display: flex;
    align-items: center;
    margin: 5px 0px;
}

.Ellipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; //控制显示几行
    -webkit-box-orient: vertical; //webbox方向
}

.dropdown {
    position: relative;
    display: inline-block;
    cursor: pointer;
    z-index: 999;
}

.dropdown .item-coupon {
    display: flex;
    align-content: center;
    align-items: center;
    color: $theme_color;
    margin: 5px 0;
    font-size: 12px;
    background-color: #ffdedf;
    border: 1px dotted $theme_color;
    cursor: pointer;

    span {
        padding: 3px;
    }
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.item-coupon {
    margin-right: 5px;
    padding: 0 5px;
    color: $theme_color;
    font-size: 12px;
    background-color: #ffdedf;
    border: 1px dotted $theme_color;
    cursor: pointer;

    span {
        padding: 3px;
    }
}

.item-promotion {
    margin-right: 5px;
    padding: 3px;
    color: $theme_color;
    font-size: 12px;
    border: 1px solid $theme_color;
}

.item-price-right {
    display: flex;
    align-content: center;
    align-items: center;
}

.item-remarks-sum {
    width: 70px;
    text-align: center;
    padding: 0 10px;
    border-left: 1px solid $border_color;
}

.item-remarks-sum p {
    color: #999999;
    font-size: 12px;
    line-height: 10px;
    text-align: center;
}

.item-remarks-num {
    line-height: 18px;
    color: #005eb7;
}

// 产品规格
.goods-select-hue {
    width: 100%;
    margin-top: 10px;
    position: relative;

    .left-img,
    .right-img {
        width: 15px;
        // height: 28px;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
        position: absolute;
        // text-align: center;
        // line-height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 700;
        cursor: pointer;
    }

    .left-img {
        left: 80px;
        z-index: 10;
    }

    .right-img {
        right: 10px;
        top: 0;
        z-index: 10;
    }

    .goods-sh-title {
        // min-width: 60px;
        // width: 600px;
        // text-align: right;
        margin-right: 15px;

    }

    .item-select {
        // min-width: 200px;
        width: 660px;
        padding: 0 20px;
        // flex: 1;
        display: flex;
        flex-direction: row;
        // position: relative;
        padding: 0 20px;
        margin-left: 30px;


        // margin-top: 15px;
        .item-select-title {
            @include content_color($light_content_color);
            font-size: 14px;
            text-align: center;
            background-color: #fff;
            // min-width: 400px;
            width: 660px;
            flex: 1;
            overflow: hidden;

            .div-p {
                // min-width: 60px;
                width: 800px;
                min-width: 800px;
                white-space: nowrap;
                display: flex;
                flex-shrink: 0;
            }

            p {
                width: 120px;
                border-radius: 3px;
                white-space: wrap;
                border: .0052rem solid #91d5ff;
                flex-shrink: 0;
                margin: 0 5px;
            }
        }


        .specactive {
            background-color: #3da8d5;
            color: #fff;
            font-weight: 700;
        }
    }
}

.item-select {
    display: flex;
    flex-direction: row;

    // margin-top: 15px;
    .item-select-title {
        @include content_color($light_content_color);
        font-size: 14px;
        margin-right: 15px;
        // width: 60px;
    }
}



.item-select-column {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}

.item-select-row {
    margin-bottom: 8px;
}

.item-select-box {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.item-select-box {
    padding: 5px;
    margin-right: 8px;
    @include background_color($light_background_color);
    border: 0.5px solid $border_color;
    cursor: pointer;
    @include content_color($light_content_color);
}

.item-select-box:hover {
    border: 0.5px solid $theme_color;
}

.item-select-box-active {
    border: 0.5px solid $theme_color;
}

.item-select-intro p {
    margin: 0px;
    padding: 5px;
}

.add-buy-car-box {
    width: 100%;
    margin-top: 15px;
    border-top: 1px dotted $border_color;

    .item-select {
        margin: 5px 0;
        display: flex;
        align-items: center;
        font-size: 14px;

        .item-select-row {
            background-color: #e0e0e0;
            padding: 3px 5px;
            border-radius: 4px;
            color: #028fcc;
            font-weight: 700;
            border: .0052rem solid #91d5ff;
        }
    }
}

.add-buy-car {
    margin-top: 15px;

    >* {
        margin: 0 4px;
    }

    button {
        font-size: 16px;
        padding: 2px 20px;
        box-sizing: unset;
        font-weight: bold;
    }
}

.goodsConfig {
    display: flex;
    justify-content: space-between;

    >span {
        padding-right: 10px;

        &:hover {
            cursor: pointer;
            color: $theme_color;
        }
    }
}

.sell-point {
    font-size: 12px;
    color: red;
    margin-bottom: 5px;
}

.goods-link-tit {
    color: #000;
    min-width: 60px;
    margin-right: 15px;
}

.goods-link-tag {
    display: inline-block;
    height: 22px;
    line-height: 22px;
    margin: 2px 4px 2px 0;
    padding: 0 8px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    background: #fff1f0;
    font-size: 12px;
    vertical-align: middle;
    opacity: 1;
    overflow: hidden;
    color: rgb(255, 102, 102) !important;
    cursor: pointer;
    font-weight: 700;
}

/******************商品图片及购买详情结束******************/
// 商品详情图
.goods-image-det {
    width: 1200px;
    margin: 0 auto;

    .text {
        height: 40px;
        font-size: 14px;
        line-height: 40px;
        color: #028fcc;
        background-color: #f7f7f7;
        padding: 0 10px;
    }

    .images {
        img {
            display: block;
            margin: 10px auto;
            width: 660px;
        }
    }
}
</style>
